<template>
  <div class="ad-table-form">
<!--    <div class="ad-block">-->
      <div class="table-op">
<!--        <el-button size="mini" type="primary" plain @click="addDriver">新增</el-button>-->
      </div>
      <ad-table :data="driver.list" v-loading="driver.initLoading" ux-grid ref="driverTable" keep-source :rules="rules" class="table"
                @row-click="selectDriverRow" :filterQuery="driverFilterQuery" @search="getInitDriverList"
                :edit-config="{trigger: 'manual', autoClear: false, mode: 'row'}">
        <ad-table-column label="序号" type="index" ctype="index" />
        <ad-table-column label="类型" prop="type" dictName="driver_type" edit-render width="120">
          <template v-slot:edit="{row}">
<!--            <el-input size="mini" v-model="row.type" edit-render />-->
            <ad-status-select size="mini" v-model="row.type" :dict="dict.driver_type"/>
          </template>
        </ad-table-column>
        <ad-table-column label="司机姓名" prop="name" edit-render width="120">
          <template v-slot:edit="{row}">
            <el-input size="mini" v-model="row.name"/>
          </template>
        </ad-table-column>
        <ad-table-column label="联系电话" prop="phone" edit-render width="128">
          <template v-slot:edit="{row}">
            <el-input size="mini" v-model="row.phone"/>
          </template>
        </ad-table-column>
        <ad-table-column label="身份证号码" prop="cardNumber" edit-render width="174">
          <template v-slot:edit="{row}">
            <el-input size="mini" v-model="row.cardNumber"/>
          </template>
        </ad-table-column>
        <ad-table-column label="车牌号码" prop="licensePlateNumber" edit-render width="170">
          <template v-slot:edit="{row}">
            <el-input size="mini" v-model="row.licensePlateNumber"/>
          </template>
        </ad-table-column>
<!--        <ad-table-column label="添加人" prop="createUser" edit-render >-->
<!--          <template v-slot:edit="{row}">-->
<!--            <el-input size="mini" v-model="row.createUser"/>-->
<!--          </template>-->
<!--        </ad-table-column>-->
        <ad-table-column label="操作" width="150">
          <template v-slot="{row}">
            <template v-if="driverTable.isActiveByRow(row)">
              <el-button size="mini" type="primary" plain @click="editDriver(row)">保存</el-button>
              <el-button size="mini" type="primary" plain @click="cancel(row)">取消</el-button>
            </template>
            <template v-else>
              <el-button size="mini" type="primary" plain @click="edit(row)">修改</el-button>
              <el-button size="mini" type="primary" plain @click="delDriver(row)">删除</el-button>
            </template>
          </template>
        </ad-table-column>
      </ad-table>
<!--      <ux-grid :data="driver.list" ref="tableTest" :edit-config="{trigger: 'click', mode: 'row'}">-->
<!--        <ux-table-column title="司机姓名" field="name" edit-render>-->
<!--          <template v-slot:edit="{row}">-->
<!--            <el-input v-model="row.name"/>-->
<!--          </template>-->
<!--        </ux-table-column>-->
<!--      </ux-grid>-->
<!--    </div>-->
    <div class="op">
      <el-button type="primary" :loading="saving" @click="addDriver">新 增</el-button>
      <el-button type="primary" plain @click="$emit('update:visible', false)">取 消</el-button>
    </div>
  </div>
</template>

<script>
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import AdStatusSelect from '@/components/AdStatusSelect'
import { getList as getDriverList, add as addDriver, edit as editDriver, del as delDriver }from '@/api/relation/driver'

export default {
  components: { AdTable, AdTableColumn, AdStatusSelect },
  dicts: ['driver_type'],
  data() {
    return {
      driverTable: null,
      driverFilterQuery: {},
      driver: {
        initLoading: true,
        list: [],
        summary: {}
      },
      rules: {
        type: [{required: true, message: '请选择类型', trigger: 'change'}],
        name: [{required: true, message: '请输入司机姓名', trigger: 'blur'}],
        phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
      }
    }
  },
  watch: {
    '$attrs.visible': {
      immediate: true,
      handler(visible) {
        if (visible) {
          this.getInitDriverList()
        }
      }
    }
  },
  created() {
    this.getInitDriverList()
  },
  mounted() {
    this.driverTable = this.$refs.driverTable.$children[0]
    // this.driverTable = this.$refs.tableTest
  },
  methods: {
    async addDriver() {
      const { row } = await this.driverTable.insertRow({type: '', name: ''}, -1)
      await this.driverTable.setActiveRow(row)
    },
    edit(row) {
      this.driverTable.setActiveRow(row)
    },
    cancel(row) {
      this.driverTable.clearActived().then(() => {
        this.driverTable.revertData(row)
      })
    },
    editDriver(row) {
      this.driverTable.validate(row).then(data => {
        if (data) return
        if (!row.id) {  // 新增
          addDriver({data: {companyId: this.$attrs.id, ...row}}).then(res => {
            this.driverTable.clearActived()
            this.getInitDriverList()
          })
        } else {  // 修改
          if (this.driverTable.isUpdateByRow(row)) {
            editDriver({data: row}).then(res => {
              this.driverTable.clearActived()
            })
          }
        }
      })
    },
    delDriver(row) {
      this.$confirm('确定删除吗？','删除').then(() => {
       if(row.id){
         delDriver({id: row.id}).then(res => {
           this.driverTable.remove(row)
         })
       }else {
         this.driverTable.remove(row)
       }
      }).catch(err => {})
    },
    selectDriverRow() {

    },
    getInitDriverList() {
      getDriverList({id: this.$attrs.id}).then(res => {
        this.driver.list = res.data
        this.driver.initLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table { height: 300px; }
.table-op { margin: 0 0 12px 0; text-align: right; }
::v-deep .ad-table.ad-table__ux-grid {
  .elx-table-th { height: 38px !important; font-size: 12px; }
  .elx-table-td { padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
}
</style>